import Qt 4.7

Image {
    source: "images/chicken_chosen/background.png"
    anchors.fill: parent
    Row  {
        id: chickenPair
        anchors.top: parent.top
        anchors.topMargin: parameter.chickenTopMargin
        spacing: 50
        anchors.horizontalCenter: parent.horizontalCenter

        Image {
            id: leftChickenFrame
            width: 246
            height: 207
            source: "images/chicken_chosen/frame-normal.png"
            Image {
                id: leftChicken
                source: "images/chicken_chosen/fowl1.png"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
            }
            states: [
            State {
                name: "fuzzy"
                when: rightChickenFrame.state == ""
                PropertyChanges {
                    target: leftChickenFrame
                    opacity: 1
                    source: "images/chicken_chosen/frame-selected.png"
                }
            }
            ]
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    leftChickenFrame.state = "fuzzy"
                }
            }
        }

        Image {
            id: rightChickenFrame
            width: 246
            height: 207
            source: "images/chicken_chosen/frame-normal.png"
            Image {
                id: rightChicken
                source: "images/chicken_chosen/fowl2.png"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
            }
            states: [
            State {
                name: "fuzzy"
                when: leftChickenFrame.state == ""
                PropertyChanges {
                    target: rightChickenFrame
                    opacity: 1
                    source: "images/chicken_chosen/frame-selected.png"
                }
            }
            ]
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    rightChickenFrame.state = "fuzzy"
                }
            }
        }
    }

    Row {
        id: nameArea
        width: 381
        height: 47
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: chickenPair.bottom
        anchors.topMargin: 0

        Text {
            id: nameText
            anchors.verticalCenter: nameImg.verticalCenter
            wrapMode: Text.WordWrap
            horizontalAlignment: Text.AlignHCenter
            font.family: "Helvetica"
            font.pointSize: 20
            font.bold: true
            color: "#00FF33"
            text:  "Name: "
        }

        Image {
            id: nameImg
            width: 282
            height: 47
            source: "images/chicken_chosen/name-box.png"
            TextInput {
                id: chickenName
                width: 270
                height: 40
                color: "white"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                font.family: "Helvetica"
                font.pointSize: 20
                font.bold: true
            }
        }
    }

    Button   {
        id: btnplay
        width: 190
        height: 53
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: nameArea.bottom
        anchors.topMargin: 10
        normalImgPath: "images/chicken_chosen/playx.png"
        pressedImgPath: "images/chicken_chosen/playx-click.png"
        onClicked: {
            mainScreen.state = ""
        }
    }
}
